<template>
  <div class="container">
    <!-- 侧边栏 -->
    <Sidebar :width="sideWidth" />

    <!-- 主体内容 -->
    <div class="main-content">
      <h2>作业名称：{{ name }}</h2>
      <h3>班级编号：{{ classNumber }}</h3>

      <!-- 统计结果表格 -->
      <el-table :data="statistics" style="width: 100%; margin-top: 20px">
        <el-table-column prop="questionContent" label="题目" width="400" />
        <el-table-column label="正确率">
          <template #default="{ row }">
            <el-progress
                :percentage="parseFloat(row.accuracy)"
                :color="parseFloat(row.accuracy) > 60 ? '#67C23A' : '#F56C6C'"
                :show-text="false"
            />
            <span style="margin-left: 10px">{{ row.accuracy }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped>

</style>

<script>
import { ElMessage, ElMessageBox } from "element-plus";
import Sidebar from "@/views/SidebarForT.vue";
import axios from "axios";

export default {
  components: {
    Sidebar,
  },
  data() {
    return {
      sideWidth: 200, // 侧边栏宽度
      classNumber: "", // 从路由接收的班级编号
      name: "", // 从路由接收的作业名称
      statistics: [], // 新增：存储统计结果数据
      HomeworkList: [] // 原有数据保留
    };
  },
  computed: {
    filteredHomeworkList() {
      return this.HomeworkList.filter(item => item.isUse === 'y');
    }
  },
  mounted() {
    // 从路由参数获取数据
    this.classNumber = this.$route.query.class_number;
    this.name = this.$route.query.name;

    // 初始化加载数据
    this.getAnasisReportList();
  },
  methods: {
    getAnasisReportList() {
      axios.get("http://localhost:80/teachers/getAnalysisReport", {
        params: {
          classNumber: this.classNumber,
          name: this.name
        }
      })
          .then((resp) => {
            console.log("完整响应数据:", resp);
            const result = resp.data;
            if (result.code === 0) {
              // 转换数据结构确保兼容性
              this.statistics = result.data.map(item => ({
                questionContent: item.questionContent || "未知题目",
                accuracy: item.accuracy ?
                    parseFloat(item.accuracy.replace('%', '')).toFixed(2) + '%' :
                    '0.00%'
              }));
              console.log("处理后的统计结果:", this.statistics);
            } else {
              ElMessage.error("请求失败: " + (result.msg || "未知错误"));
            }
          })
          .catch((error) => {
            console.error("请求异常:", error);
            ElMessage.error("请求失败: " + (error.response?.data?.message || error.message));
          });
    }
  }
}
</script>
<style scoped>
.container {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  padding: 20px;
  margin-left: 20px;
}

h2 {
  color: #303133;
  margin-bottom: 10px;
}

h3 {
  color: #606266;
  margin-bottom: 20px;
}
</style>
